<template>
	<div v-if="dataInfo">
		<view class="wrap-order-process flex align-center">
			<block v-for="(item, index) in process_list" :key="index">
				<view class="process-item">
					<view class="flex column align-center just-center">
						<view
							class="process-icon flex align-center just-center"
							:class="{
								'process-icon-active': item.status <= dataInfo.status,
							}"
						>
							<image
								mode="heightFix"
								:src="
									getImageURL(
										`order/${item.icon}_${item.status <= dataInfo.status ? 'active' : 'normal'}.png`
									)
								"
							/>
						</view>

						<view
							class="process-title f-24"
							:class="{
								active: item.status <= dataInfo.status,
							}"
						>
							{{ item.title }}
						</view>
					</view>
				</view>
			</block>
		</view>
	</div>
</template>

<script>
	export default {
		props: {
			/**
			 * 详情数据
			 */
			dataInfo: {
				type: Object,
				default: null,
			},
		},
		data() {
			return {
				process_list: [
					{
						title: "技师接单",
						status: "3",
						icon: "jsjd",
					},
					{
						title: "技师出发",
						status: "4",
						icon: "jscf",
					},
					{
						title: "技师到达",
						status: "5",
						icon: "jsdd",
					},
					{
						title: "开始服务",
						status: "6",
						icon: "ksfw",
					},
					{
						title: "服务完成",
						status: "7",
						icon: "fwwc",
					},
				],
			};
		},
	};
</script>

<style lang="scss" scoped>
	.wrap-order-process {
		margin-top: 20rpx;
		width: 100%;
		border-radius: 10rpx;
		overflow: hidden;
		background-color: white;
		height: 186rpx;

		.process-item {
			display: inline-block;
			flex: 1;
			overflow: hidden;
			height: 186rpx;

			> view {
				width: 100%;
				height: 100%;

				.process-icon {
					width: 90rpx;
					height: 90rpx;
					border-radius: 50%;
					border: 2rpx solid #666666;

					> image {
						height: 48rpx;
					}
				}

				.process-icon-active {
					border-color: $theme-color !important;
				}

				.process-title {
					margin-top: 15rpx;
					color: $title-color;
				}
			}
		}
	}
</style>
